<template>
  <div class="set login">
    <div
      class="underline"
      style="width:160px;"
    >
      <span class="title1 color1 zIndex fontBold">关于深房协</span>
    </div>
    <div class="set_content">
      <div
        class="setItem flex align_center justify_between"
        @click="router.push({path:'/otherServices/introduce', query:{ type : '1' } })"
      >
        <div class="flex align_center">
          <svg
            class="icon"
            aria-hidden="true"
          >
            <use xlink:href="#icon-gongsimingcheng" />
          </svg>
          <span class="fontBold content3 color3">协会介绍</span>
        </div>
        <div class="fontBold content3 color2">
          >
        </div>
      </div>
      <div
        class="setItem flex align_center justify_between"
        @click="router.push({path:'/otherServices/introduce', query:{ type : '2' } })"
      >
        <div class="flex align_center">
          <svg
            class="icon"
            aria-hidden="true"
          >
            <use xlink:href="#icon-dingdanzhongxin" />
          </svg>
          <span class="fontBold content3 color3">入会协议</span>
        </div>
        <div class="fontBold content3 color2">
          >
        </div>
      </div>
      <div
        class="setItem flex align_center justify_between"
        @click="router.push({path:'/otherServices/introduce', query:{ type : '3' } })"
      >
        <div class="flex align_center">
          <svg
            class="icon"
            aria-hidden="true"
          >
            <use xlink:href="#icon-xiangmuguanli" />
          </svg>
          <span class="fontBold content3 color3">平台功能介绍</span>
        </div>
        <div class="fontBold content3 color2">
          >
        </div>
      </div>
      <div
        class="setItem flex align_center justify_between"
        @click="share"
      >
        <div class="flex align_center">
          <svg
            class="icon"
            aria-hidden="true"
          >
            <use xlink:href="#icon-fenxiang" />
          </svg>
          <span class="fontBold content3 color3">分享协会</span>
        </div>
        <div class="fontBold content3 color2">
          >
        </div>
      </div>
      <div
        class="setItem flex align_center justify_between"
        @click="router.push('/otherServices/contact')"
      >
        <div class="flex align_center">
          <svg
            class="icon"
            aria-hidden="true"
          >
            <use xlink:href="#icon-shoujihao" />
          </svg>
          <span class="fontBold content3 color3">联系协会</span>
        </div>
        <div class="fontBold content3 color2">
          >
        </div>
      </div>
      <div
        class="setItem flex align_center justify_between"
        @click="signOut"
      >
        <div class="flex align_center">
          <svg
            class="icon"
            aria-hidden="true"
          >
            <use xlink:href="#icon-qiehuanzhanghao" />
          </svg>
          <span class="fontBold content3 color3">退出/切换账号</span>
        </div>
        <div class="fontBold content3 color2">
          >
        </div>
      </div>
    </div>
    <div class="ewm flex justify_between align_center">
      <div class="ewm_box flex justify_between align_center">
        <div class="ewm_left">
          <img src="/src/assets/img/logo.png">
          <p class="font400 content3 color3">
            长按关注深圳房协公众号
            了解我们的最新动态
          </p>
        </div>
        <div class="ewm_right">
          <img src="/src/assets/img/ewm.png">
        </div>
      </div>
    </div>
  </div>
  <div class="fexd_footer">
    <div class="footer_btn flex align_center justify_between">
      <div class="flex align_center">
        <div
          @click="back"
          class="agree font400 content3 color4"
        >
          返回
        </div>
      </div>
    </div>
  </div>
  <van-dialog
    v-model:show="show"
    title="温馨提示"
    confirm-button-color="#FF7A1F"
  >
    <div class="Scan">
      <p class="font400 content3 color3">
        您可长按添加工作人员微信 与我们取得联系
      </p>
      <img src="@/assets/img/no-content-color.png">
    </div>
  </van-dialog>
  <Loading
    :visible="visible"
    :share-img="shareImg"
    @closeLoading="closeLoading"
  />
</template>

<script setup lang="ts">
import { getToken, setToken } from '@/service/cookie'
import { Dialog, Toast } from 'vant'
import { ref, defineAsyncComponent } from 'vue'
import { userShare } from '@/api/index'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { logout } from '@/api'
const Loading = defineAsyncComponent(() => import('@/components/Loading/index.vue'))
const router = useRouter()
const store = useStore()
const show: any = ref(false)
const visible: any = ref(false)
const shareImg: any = ref('')

const share = async () => {
  try {
    visible.value = true
    await userShare({ web_url: encodeURIComponent(window.location.href) })
    shareImg.value = `${import.meta.env.VITE_API_BASEURL}v1/user/share?user_id=${getToken('userId')}&web_url=${encodeURIComponent(window.location.href)}`
  } catch (error: any) {
    Toast(error.message)
  }
}

const back = () => {
  if (store.state.from.path !== '/') {
    router.back()
  } else {
    router.replace('/')
  }
}

const closeLoading = async () => {
  visible.value = false
}

const signOut = () => {
  Dialog.confirm({
    title: '温馨提示',
    message: '是否确定退出登录'
  })
    .then(async () => {
      await logout()
      setToken('token', '')
      setToken('bindId', '')
      router.replace('/login')
      // logout
    })
    .catch(() => {
      // on cancel
    })
}

</script>

<style lang="less" scoped>
.set {
  padding: 0 30px 80px;
  margin-top: 40px;
  .set_content {
    margin-top: 30px;
    .icon {
      width: 18px;
      height: 18px;
      margin-right: 10px;
    }
    .setItem {
      width: 288px;
      height: 44px;
      line-height: 44px;
      background: #ffffff;
      border-radius: 5px;
      padding: 0 15px;
      margin-bottom: 15px;
    }
  }
  .ewm {
    width: 100%;
    height: 114px;
    background: #ffffff;
    border-radius: 5px;
    margin-top: 16px;
    .ewm_box {
      width: 100%;
      padding: 0 15px;
      .ewm_left {
        img {
          width: 100px;
          height: 30px;
          object-fit: contain;
        }
        p {
          width: 180px;
          margin-top: 14px;
          line-height: 18px;
        }
      }
      .ewm_right {
        width: 74px;
        height: 74px;
        img {
          width: 74px;
          height: 74px;
          object-fit: contain;
        }
      }
    }
  }
}

  .Scan {
    p {
      width: 190px;
      margin: 18px auto;
      text-align: center;
      line-height: 20px;
    }
    img {
      width: 95px;
      height: 95px;
      object-fit: contain;
      margin: 0 auto;
    }
  }
.fexd_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
  .footer_btn {
    padding: 0 30px;
    height: 100%;
    text-align: center;
    .agree {
      width: 315px;
      height: 44px;
      background: #85898c;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
    }
  }
}

@media (min-width: 750px) {
  .set {
  padding: 0 30px 80px;
  margin-top: 40px;
  .set_content {
    margin-top: 30px;
    .icon {
      width: 18px;
      height: 18px;
      margin-right: 10px;
    }
    .setItem {
      width: 288px;
      height: 44px;
      line-height: 44px;
      background: #ffffff;
      border-radius: 5px;
      padding: 0 15px;
      margin-bottom: 15px;
    }
  }
  .ewm {
    width: 100%;
    height: 114px;
    background: #ffffff;
    border-radius: 5px;
    margin-top: 16px;
    .ewm_box {
      width: 100%;
      padding: 0 15px;
      .ewm_left {
        img {
          width: 100px;
          height: 30px;
          object-fit: contain;
        }
        p {
          width: 180px;
          margin-top: 14px;
          line-height: 18px;
        }
      }
      .ewm_right {
        width: 74px;
        height: 74px;
        img {
          width: 74px;
          height: 74px;
          object-fit: contain;
        }
      }
    }
  }
}

  .Scan {
    p {
      width: 190px;
      margin: 18px auto;
      text-align: center;
      line-height: 20px;
    }
    img {
      width: 95px;
      height: 95px;
      object-fit: contain;
      margin: 0 auto;
    }
  }
.fexd_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
  .footer_btn {
    padding: 0 30px;
    height: 100%;
    text-align: center;
    .agree {
      width: 315px;
      height: 44px;
      background: #85898c;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
    }
  }
}
}
</style>
